<%@ page import="icom.icss.entity.PageBean" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!-- 导航栏 -->
<div class="container">
    <div class="row" style=" padding: 10px;padding-left: 0px;">
        <div class="col-md-1" style="padding: 10px; ">
            <a href="index.jsp"><img src="img/haier2020_logo.webp" width="80px" height="45px"></img></a>
        </div>
        <div class="col-md-5" style="padding: 2px;">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false"
                       style="color: #000000;"><strong>智慧家庭</strong>
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">电视</a></li>
                        <li><a href="#">冰柜</a></li>
                        <li><a href="#">洗衣机</a></li>
                        <li><a href="#">空调</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false"
                       style="color: #000000;"><strong>商用解决方案</strong>
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="U-home.html">U-home</a></li>
                        <li><a href="#">商用冷柜</a></li>
                        <li><a href="#">商用电视</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false"
                       style="color: #000000;"><strong>购买与服务</strong>
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="page">会员才可以点</a></li>
                        <li><a href="#">你不可以</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false"
                       style="color: #000000;"><strong>关于海尔</strong>
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="about.html">海尔品牌</a></li>
                        <li><a href="#">投资者关系</a></li>
                        <li><a href="#">品牌资讯</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="col-md-offset-2 col-md-2" style="padding: 2px;text-align: right; margin-top: 15px;">
            <a href="shopcar.jsp"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"
                                        style="font-size: 25px;color: #000000;"></span></a>
        </div>
        <div id="headtext" ; class="col-md-2" style="padding: 2px;text-align: center;margin-top: 15px;">
            <c:if test="${!empty userLogin}">
                <a style="text-decoration: none" href="log_in.jsp"><span class="glyphicon glyphicon-user"
                                                                         aria-hidden="true"
                                                                         style="font-size: 25px;color: #000000;"></span>&nbsp;&nbsp;&nbsp;&nbsp;</a><span
                    style="color: #e4b9b9; font-size:large">${userLogin.username}</span>&nbsp;&nbsp;&nbsp;<a style="text-decoration: none" href="logOut">退出</a>
            </c:if>
            <c:if test="${empty userLogin}">
                <a href="log_in.jsp"><span class="glyphicon glyphicon-user" aria-hidden="true"
                                           style="font-size: 25px;color: #000000;">&nbsp;</span></a>
            </c:if>
        </div>
    </div>
</div>

<c:if test="${empty pageBean}">
    <h1>没有查询到用户</h1>
</c:if>
<c:if test="${!empty pageBean}">
    <table class="table table-striped table-hover">

        <caption>用户列表分页显示</caption>
        <tr>
            <th><input type="checkbox" id="checkAll"> 全选</th>
            <th>用户名</th>
            <th>密码</th>
            <th>操作</th>
            <th>编辑</th>
        </tr>
        <c:forEach var="user" items="${pageBean.userList}">
            <tr>
                <td><input type="checkbox" name="user1" class="select" value="${user.username}"></td>
                <td>${user.username}</td>
                <td>${user.password}</td>
                <td>
                    <button class="del btn btn-danger" value="${user.username}">删除</button>
                </td>
                <td>
                    <button class="edit btn btn-primary" value="${user.username}">编辑</button>
                </td>
            </tr>

        </c:forEach>

    </table>
    <div align="center">
        <button class="btn btn-danger" id="elDelete">全部删除</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button class="btn btn-default"><a href="sign_in.jsp" style="text-decoration:none">添加</a></button>
    </div>

     <div>
         <nav aria-label="page" style="text-align: center">
             <ul class="pagination" style="margin: 20px auto">
                     <%--                如果当前页是第一页，前一页的按钮需要禁用--%>
                 <c:if test="${pageBean.currentPage==1}">
                     <li class="disabled"><a href="script:void(0)" aria-label="Previous"><span
                             aria-hidden="true">&laquo;</span></a></li>
                 </c:if>
                 <c:if test="${pageBean.currentPage!=1}">
                     <li><a href="page?currentPage=${pageBean.currentPage-1}&count=${pageBean.count}"
                            aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                 </c:if>
                     <%--                    页码应该从pageBean中读出来--%>
                 <c:forEach var="page" begin="1" end="${pageBean.totalPage}" step="1">
                     <%--                    当前页需要是激活的状态--%>
                     <c:if test="${page==pageBean.currentPage}">
                         <li class="active"><a href="page?currentPage=${page}&count=${pageBean.count}">${page} <span
                                 class="sr-only">(current)</span></a></li>
                     </c:if>
                     <c:if test="${page!=pageBean.currentPage}">
                         <li><a href="page?currentPage=${page}&count=${pageBean.count}">${page} <span class="sr-only">(current)</span></a>
                         </li>
                     </c:if>
                 </c:forEach>
                     <%--    如果当前页是最后一页，禁用，不响应点击事件--%>
                 <c:if test="${pageBean.currentPage==pageBean.totalPage}">
                     <li class="disabled"><a href="script:void(0)" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                     </li>
                 </c:if>
                 <c:if test="${pageBean.currentPage!=pageBean.totalPage}">
                     <li><a href="page?currentPage=${pageBean.currentPage+1}&count=${pageBean.count}" aria-label="Next"><span
                             aria-hidden="true">&raquo;</span></a></li>
                 </c:if>
             </ul>
         </nav>
     </div>
</c:if>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script>





    //全删
    $("#elDelete").click(function () {
        var s = '';
        $('input[name="user1"]:checked').each(function () {
            s += $(this).val() + ','; //遍历得到所有checkbox的value
        });
        if(s==''){
            alert("请选择要删除的对象！");
        }


        location.href = "delete?s=" + s + "&count=${pageBean.count}" + "&currentPage=${pageBean.currentPage}";
        // if (s.length > 0) {
        //     //删除多出来的“，”
        //     s = s.substring(0,s.length - 1);
        // }

    });
    // 编辑
    $(".edit").click(function () {
        if (confirm("是否要修改该用户？")) {
            location.href = "select?username=" + this.value +"&count=${pageBean.count}";
        }

    });



    //删除
    $(".del").click(function () {
        if (confirm("是否要删除该用户？")) {
            location.href = "delete?username=" + this.value + "&count=${pageBean.count}" + "&currentPage=${pageBean.currentPage}";
        }

    });


    //全选事件
    $("#checkAll").click(function () {
        var xz = $(this).prop("checked");
        var ck = $(".select").prop("checked", xz);
    })


    //上一页的点击事件
    $(".prev").click(function () {
        //获取当前页
        var currentPage = Number.parseInt($(".currentPage").text());
        //获取每页显示多少条数据
        var count = $(".count").text();
        //如果当前页是第一页，不需要发送请求
        if (currentPage != 1) {
            //当前不是1，发送请求,上一页
            location.href = "page?currentPage=" + (currentPage - 1) + "&count=" + count;
        }
    });
    //下一页的点击事件
    $(".next").click(function () {
        //获取当前页
        var currentPage = Number.parseInt($(".currentPage").text());
        //获取每页显示多少条数据
        var count = $(".count").text();
        //获取总共有多少页
        var totalPage = $(".totalPage").text();
        //如果当前页是最后一页，不需要发送请求
        if (currentPage != totalPage) {
            //当前不是最后一页，发送请求,下一页
            location.href = "page?currentPage=" + (currentPage + 1) + "&count=" + count;
        }
    });
</script>
